<template>
  <div>
    <el-table
      ref="mytable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="options.radio" type="index" width="50"></el-table-column>
      <el-table-column v-if="options.selection" type="selection" width="55"></el-table-column>
      <el-table-column
        align="center"
        v-for="(item,index,key) in tableColumns"
        :item="item"
        :key="key"
        :index="index"
        :label="item.label"
      >
        <template slot-scope="scope">
          <div v-if="item.colIsEdit">
            <el-input-number v-if="scope.row.edit" size="small" v-model="scope.row[item.prop]"  :placeholder="'请输入'+item.label" :controls="false"></el-input-number>
            <span v-if="!scope.row.edit">{{scope.row[item.prop]}}</span>
          </div>
          <div v-else>
            <span>{{scope.row[item.prop]}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- 全局控制的编辑 -->
          <div v-if="options.is_edit&&scope.row.add==undefined" style="display: inline-block;">
            <!-- 编辑 -->
            <el-button
              size="mini"
              v-if="!scope.row.edit"
              @click="handleEdit(scope.$index, scope.row)"
              type="primary"
            >修改</el-button>
            <!-- 保存 -->
            <el-button
              size="mini"
              type="success"
              :plain="true"
              v-if="scope.row.edit"
              @click="handleSave(scope.$index, scope.row)"
            >保存</el-button>
          </div>
          <!-- 添加控制 -->
          <div v-if="scope.row.add!=undefined&&scope.row.add" style="display: inline-block;">
            <!-- 保存 -->
            <el-button
              size="mini"
              type="success"
              :plain="true"
              v-if="scope.row.edit"
              @click="handleSave(scope.$index, scope.row)"
            >保存</el-button>
          </div>
          <!-- 全局控制删除 -->
          <el-button
            size="mini"
            v-if="options.is_delete&&scope.row.add==undefined"
            :plain="true"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    background=""
      layout="prev, pager, next"
      :total="total"
      :size="size"
      >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props:{
    columns:{
      type:Array,
      default:function(){
        return []
      }
    },
    data:{
      type:Array,
      default:function(){
        return []
      }
    },
    options:{
      type:Object,
      default:function(){
        return {
          is_edit: true, //是否可编辑
          is_delete: false, //是否可删除
          selection: false, //是否需要复选框
          radio: false, //单选变色
        }
      }
    },

  },
  watch: {
    tableData: function() {
      //监听数据变化f
      this.$nextTick(function() {
        // this.tableRowClassName();
      });
    }
  },
  mounted: function() {
    this.initEditAttribute();
  },
  updated() {
    if(this.tableData===null || this.tableData.length === 0){
      this.initEditAttribute();
    }
  },
  data() {
    return {
      multipleSelection: [], //复选框，数据
      // space_color: true, //隔行变色
      tableData:this.data,
      tableColumns:this.columns,
      current:1,
      size:10,
      total:0
    };
  },
  methods: {
    //隔行变色
    // tableRowClassName() {
    //   //选取DOM节点
    //   let trs = this.$refs.mytable.$el
    //     .getElementsByTagName("tbody")[0]
    //     .getElementsByTagName("tr");
    //   for (let i in trs) {
    //     if (i % 2 == 0) {
    //       //当隔行变色未true时改变颜色
    //       if (this.space_color) {
    //         trs[i].style.backgroundColor = "#f0f9eb";
    //       } else {
    //         trs[i].style.backgroundColor = "";
    //       }
    //     }
    //   }
    // },

    //多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("selection:", this.multipleSelection);
    },
    //编辑
    handleEdit(index, row) {
      console.log(index, row);
      row.edit = true;
      this.$forceUpdate()
    },
    //删除
    handleDelete(index, row) {
      thistableDatasplice(index, 1);
      this.$message({
        message: "删除成功！",
        type: "success"
      });
    },
    //保存
    handleSave(index, row) {
      console.log(index, row);
      row.edit = false;
      delete this.table_data[index].add;
      this.$message({
        message: "保存成功！",
        type: "success"
      });
    },
    //向表格数据添加edit属性值，默认为false
    initEditAttribute() {
      if (this.tableData && this.tableData.length > 0) {
        //添加编辑事件
        this.tableData = this.tableData.map(item =>{
          return {...item,edit:false}
        })
      }
    },
  },
};
</script>
<style scoped>
.el-pagination {
  margin-top: 20px;
  float: right;
}
</style>
